import React, { useEffect } from 'react';
import { Box, Dialog, Field, Form, Input, Loading, NumberPicker, Radio } from '@alifd/next';
import { useRequest } from 'ice';
import { saveQuoteService, QuoteListVO, getLowPrice } from '@/pages/QuoteManage/CommodityQuote/service';
import st from './index.module.scss';
import { useIntl } from 'react-intl';

interface Props {
  visible: boolean;
  row: QuoteListVO;
  onRefresh: () => void;
  onClose: () => void;
}

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const FormItem = Form.Item;

const CreateDialog: React.FC<Props> = (props) => {
  const field = Field.useField([]);
  const intl = useIntl();
  const { visible, row, onRefresh = () => { }, onClose } = props;

  const { data, request: getPrice, loading: priceLoading } = useRequest(getLowPrice, {
    // manual
  });

  const { request: saveQuote, loading } = useRequest(saveQuoteService, {
    manual: true,
    onSuccess: () => {
      onRefresh();
      onClose();
    },
  });

  useEffect(() => {
    if (visible) {
      field.setValues({
        skuId: row.id,
        askPrice: row.askPrice,
        storeAmount: row.storeAmount,
        askPeriod: row.askPeriod,
      });
      getPrice(row.id);
    } else {
      field.reset();
    }
  }, [visible]);

  const handleOk = () => {
    field.validate((errors, values): void => {
      if (errors) {
        return;
      }
      saveQuote({
        ...values,
        skuId: row.id,
      });
    });
  };

  return (
    <Dialog
      shouldUpdatePosition
      overflowScroll
      visible={visible}
      onClose={onClose}
      title={row.status ? '查看详情' : '报价'}
      style={{ width: 620 }}
      onOk={handleOk}
      onCancel={onClose}
      okProps={{ loading }}
      footer={row.status ? false : undefined}
    >
      <Loading visible={priceLoading} style={{ width: '100%' }}>
        <Box direction="row" spacing={20} className={st.orderInfo}>
          <div className={st.imageBlock}>
            <img src={row.mainImage} alt="商品主图" className={st.mainImage} />
          </div>
          <Form
            labelAlign="left"
            responsive
            style={{ flex: 1 }}
            className={st.orderForm}
            isPreview
            size="small"
          >
            <Form.Item colSpan={12}>
              <span className={st['next-form-preview']}>{row.name}</span>
            </Form.Item>
            <Form.Item label="品牌：" colSpan={12}>
              <span className={st['next-form-preview']}>{`${row.brandName || '-'}/${row.categoryName || ''}`}</span>
            </Form.Item>
            <Form.Item label="规格：" colSpan={12}>
              <span className={st['next-form-preview']}>{row.attrValue}</span>
            </Form.Item>
            <Form.Item label="最低报价：" colSpan={6}>
              <span className={st['next-form-preview']}>
                {intl.formatNumber(data?.totalFee || 0, { style: 'currency', currency: 'USD' })}
              </span>
            </Form.Item>
            <Form.Item label="最高出价：" colSpan={6}>
              <span className={st['next-form-preview']}>
                {intl.formatNumber(data?.totalFee || 0, { style: 'currency', currency: 'USD' })}
              </span>
            </Form.Item>
          </Form>
        </Box>
      </Loading>
      <Form
        fullWidth
        labelAlign="left"
        field={field}
        useLabelForErrorMessage
        {...formItemLayout}
        isPreview={!!row.status}
      >
        <FormItem label="商品报价:" name="askPrice" required format="number">
          <NumberPicker placeholder="请输入" style={{ width: '100%' }} hasTrigger={false} min={0} />
        </FormItem>
        <FormItem label="商品库存:" format="number" name="storeAmount" required>
          <NumberPicker placeholder="请输入" style={{ width: '100%' }} hasTrigger={false} min={0} />
        </FormItem>
        <FormItem label="有效期:" name="askPeriod" required>
          <Radio.Group>
            {[3, 7, 15, 30].map((i) => (
              <Radio key={i} value={i}>
                {`${i}天`}
              </Radio>
            ))}
          </Radio.Group>
        </FormItem>
      </Form>
    </Dialog>
  );
};

export default CreateDialog;
